<template>
    <div>
        <div style="display: flex; justify-content: space-between">
            <div>
                <el-input
                    size="small"
                    prefix-icon="el-icon-search"
                    placeholder="请输入员工姓名进行搜索..."
                    style="width: 300px; margin-right: 10px"
                    :disabled="showAdvanceSearchVisible"
                    v-model="empName"
                    clearable
                    @keyup.enter.native="initEmployees"
                    @clear="initEmployees"
                ></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    :disabled="showAdvanceSearchVisible"
                    @click="initEmployees"
                    >搜索</el-button
                >
                <el-button
                    type="primary"
                    size="small"
                    @click="
                        showAdvanceSearchVisible = !showAdvanceSearchVisible
                    "
                >
                    <i
                        :class="
                            showAdvanceSearchVisible
                                ? 'fa fa-angle-double-down'
                                : 'fa fa-angle-double-up'
                        "
                        aria-hidden="true"
                    ></i>
                    高级搜索</el-button
                >
            </div>
            <div>
                <el-button size="small" type="success">
                    <i class="fa fa-level-up" aria-hidden="true"></i>
                    导入数据
                </el-button>
                <el-button size="small" type="success">
                    <i class="fa fa-level-down" aria-hidden="true"></i>
                    导出数据
                </el-button>
                <el-button
                    size="small"
                    type="warning"
                    icon="el-icon-plus"
                    @click="showAddEmpView"
                    >添加员工</el-button
                >
            </div>
        </div>

        <!-- <transition name="bounce">
            <div
                v-show="showAdvanceSearchVisible"
                style="
                    border: 1px solid #fcf9f9;
                    border-radius: 5px;
                    box-sizing: border-box;
                    padding: 5px;
                    margin: 10px 0px;
                "
            >
                <el-row>
                    <el-col :span="5">
                        政治面貌
                        <el-select
                            v-model="searchValue.politicId"
                            size="mini"
                            style="width: 150px"
                            placeholder="请选择政治面貌"
                        >
                            <el-option
                                v-for="item in politicsstatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族
                        <el-select
                            v-model="searchValue.nationId"
                            style="width: 150px"
                            size="mini"
                            placeholder="请选择民族"
                        >
                            <el-option
                                v-for="item in nations"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        职位
                        <el-select
                            v-model="searchValue.posId"
                            size="mini"
                            style="width: 150px"
                            placeholder="请选择职位"
                        >
                            <el-option
                                v-for="item in positions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        职称
                        <el-select
                            v-model="searchValue.jobLevelId"
                            size="mini"
                            style="width: 150px"
                            placeholder="请选择职称"
                        >
                            <el-option
                                v-for="item in joblevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        聘用形式
                        <el-radio-group v-model="searchValue.engageForm">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="5">
                        所属部门
                        <el-popover
                            placement="bottom"
                            title="选择所属部门"
                            width="200"
                            trigger="manual"
                            v-model="visible2"
                        >
                            <el-tree
                                :data="allDept"
                                default-expand-all
                                :props="defaultProps"
                                @node-click="searchHandleNodeClick"
                            ></el-tree>
                            <div
                                slot="reference"
                                class="inputDeptNameClass"
                                @click="showDeptViewSearch"
                            >
                                {{ inputDeptName }}
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期
                        <el-date-picker
                            v-model="searchValue.beginDateScope"
                            size="mini"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button size="mini">取消</el-button>
                        <el-button
                            size="mini"
                            icon="el-icon-search"
                            type="primary"
                            @click="initEmps('advanced')"
                            >搜索</el-button
                        >
                    </el-col>
                </el-row>
            </div>
        </transition> -->

        <el-table
            :data="employees"
            stripe
            border
            height="513"
            v-loading="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            style="width: 100%; margin-top: 15px"
        >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="name"
                label="姓名"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="workID"
                label="工号"
                align="center"
                width="90"
            >
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别"
                align="center"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="birthday"
                label="生日"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="idCard"
                label="身份证号"
                align="center"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="wedlock"
                label="婚姻"
                align="center"
                width="50"
            >
            </el-table-column>
            <el-table-column
                prop="nation.name"
                label="民族"
                align="center"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="nativePlace"
                label="籍贯"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="politicsStatus.name"
                label="政治面貌"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号码"
                align="center"
                width="130"
            >
            </el-table-column>
            <el-table-column
                prop="address"
                label="联系地址"
                align="center"
                width="350"
            >
            </el-table-column>
            <el-table-column
                prop="department.name"
                label="所属部门"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="position.name"
                label="职位"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="engageForm"
                label="聘用形式"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="tiptopDegree"
                label="学历"
                align="center"
                width="70"
            >
            </el-table-column>
            <el-table-column
                prop="specialty"
                label="专业"
                align="center"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="school"
                label="学校"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="workState"
                label="在职状态"
                align="center"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="beginDate"
                label="入职日期"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="conversionTime"
                label="转正日期"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="beginContract"
                label="合同开始"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="endContract"
                label="合同结束"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column label="合同期限" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.contractTerm }}</el-tag>
                    年
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="200"
            >
                <template slot-scope="scope">
                    <el-button
                        @click="showEditEmpView(scope.row)"
                        style="padding: 3px"
                        size="mini"
                        type="success"
                        >编辑</el-button
                    >
                    <el-button
                        @click="deleteEmp(scope.row)"
                        style="padding: 3px"
                        size="mini"
                        type="danger"
                        >删除</el-button
                    >
                    <el-button style="padding: 3px" size="mini" type="primary"
                        >查看高级资料</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
            <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加员工弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="80%">
            <div>
                <el-form ref="empForm" :model="emp" :rules="empRule">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名" prop="name">
                                <el-input
                                    size="mini"
                                    v-model="emp.name"
                                    style="width: 150px"
                                    prefix-icon="el-icon-edit"
                                    placeholder="输入员工姓名"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="性别"
                                prop="gender"
                            >
                                <el-radio-group v-model="emp.gender">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="出生日期"
                                prop="birthday"
                            >
                                <el-date-picker
                                    v-model="emp.birthday"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 150px"
                                    placeholder="选择日期"
                                    clearable
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="政治面貌"
                                prop="politicId"
                            >
                                <el-select
                                    filterable
                                    v-model="emp.politicId"
                                    size="mini"
                                    style="width: 170px"
                                    clearable
                                    placeholder="请选择政治面貌"
                                >
                                    <el-option
                                        v-for="item in politicsstatus"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族" prop="nationId">
                                <el-select
                                    filterable
                                    v-model="emp.nationId"
                                    style="width: 150px"
                                    size="mini"
                                    placeholder="请选择民族"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in nations"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="籍贯" prop="nativePlace">
                                <el-input
                                    clearable
                                    v-model="emp.nativePlace"
                                    placeholder="输入籍贯"
                                    prefix-icon="el-icon-edit"
                                    size="mini"
                                    style="width: 150px"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱" prop="email">
                                <el-input
                                    v-model="emp.email"
                                    placeholder="输入电子邮箱"
                                    prefix-icon="el-icon-message"
                                    size="mini"
                                    style="width: 150px"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="联系地址" prop="address">
                                <el-input
                                    v-model="emp.address"
                                    placeholder="输入员工联系地址"
                                    prefix-icon="el-icon-edit"
                                    style="width: 170px"
                                    size="mini"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="职位" prop="posId">
                                <el-select
                                    v-model="emp.posId"
                                    size="mini"
                                    filterable
                                    style="width: 150px"
                                    placeholder="请选择职位"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in positions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职称" prop="jobLevelId">
                                <el-select
                                    v-model="emp.jobLevelId"
                                    filterable
                                    size="mini"
                                    style="width: 150px"
                                    placeholder="请选择职称"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in joblevels"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属部门" prop="department">
                                <el-popover
                                    placement="bottom"
                                    title="选择所属部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="visible"
                                >
                                    <el-tree
                                        :data="allDept"
                                        default-expand-all
                                        :props="defaultProps"
                                        @node-click="handleNodeClick"
                                    ></el-tree>
                                    <div
                                        slot="reference"
                                        class="inputDeptNameClass"
                                        @click="showDeptView"
                                    >
                                        {{ inputDeptName }}
                                    </div>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电话号码" prop="phone">
                                <el-input
                                    v-model="emp.phone"
                                    size="mini"
                                    prefix-icon="el-icon-phone"
                                    clearable
                                    style="width: 170px"
                                    placeholder="输入所属部门"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号" prop="workId">
                                <el-input
                                    clearable
                                    v-model="emp.workId"
                                    size="mini"
                                    placeholder="输入工号"
                                    prefix-icon="el-icon-edit"
                                    style="width: 150px"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历" prop="tiptopDegree">
                                <el-select
                                    v-model="emp.tiptopDegree"
                                    size="mini"
                                    style="width: 150px"
                                    placeholder="请选择学历"
                                    filterable
                                    clearable
                                >
                                    <el-option
                                        v-for="item in tiptopDegree"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校" prop="school">
                                <el-input
                                    v-model="emp.school"
                                    placeholder="输入学校"
                                    size="mini"
                                    prefix-icon="el-icon-edit"
                                    style="width: 150px"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="专业名称" prop="specialty">
                                <el-input
                                    v-model="emp.specialty"
                                    placeholder="输入专业"
                                    size="mini"
                                    prefix-icon="el-icon-edit"
                                    style="width: 170px"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="入职日期"
                                prop="beginDate"
                            >
                                <el-date-picker
                                    v-model="emp.beginDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 120px"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="转正日期"
                                prop="conversionTime"
                            >
                                <el-date-picker
                                    v-model="emp.conversionTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 120px"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="合同开始"
                                prop="beginContract"
                            >
                                <el-date-picker
                                    v-model="emp.beginContract"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 150px"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                size="mini"
                                label="合同结束"
                                prop="endContract"
                            >
                                <el-date-picker
                                    v-model="emp.endContract"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 170px"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号" prop="idCard">
                                <el-input
                                    v-model="emp.idCard"
                                    placeholder="输入身份证"
                                    size="mini"
                                    prefix-icon="el-icon-edit"
                                    style="width: 150px"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="聘用形式" prop="engageForm">
                                <el-radio-group v-model="emp.engageForm">
                                    <el-radio label="劳动合同"
                                        >劳动合同</el-radio
                                    >
                                    <el-radio label="劳务合同"
                                        >劳务合同</el-radio
                                    >
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 员工数据
            employees: [],
            // 表格加载效果
            loading: false,
            // 分页相关
            total: 0,
            currentPage: 1,
            size: 10,
            // 搜索
            empName: "",
            // 添加标题
            title: "",
            // 控制添加弹出框显示隐藏
            dialogVisible: false,
            // 添加数据
            emp: {
                id: null,
                name: "",
                gender: "",
                birthday: null,
                idCard: "",
                wedlock: "",
                nationId: null,
                nativePlace: "",
                politicId: null,
                email: "",
                phone: "",
                address: "",
                departmentId: null,
                jobLevelId: null,
                posId: null,
                engageForm: "",
                tiptopDegree: "",
                specialty: "",
                school: "",
                beginDate: "",
                workState: "在职",
                workId: "",
                contractTerm: null,
                conversionTime: "",
                notWorkDate: null,
                beginContract: "",
                endContract: "",
                workAge: null,
                salaryId: null,
            },
            // 添加表单校验规则
            empRule: {
                name: [
                    {
                        required: true,
                        message: "请输入员工姓名",
                        trigger: "blur",
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "请输入员工性别",
                        trigger: "blur",
                    },
                ],
                birthday: [
                    {
                        required: true,
                        message: "请选择出生日期",
                        trigger: "blur",
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: "请输入身份证号码",
                        trigger: "blur",
                    },
                    {
                        pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
                        message: "身份证号码不正确",
                        trigger: "blur",
                    },
                ],
                wedlock: [
                    {
                        required: true,
                        message: "请输入婚姻状况",
                        trigger: "blur",
                    },
                ],
                nationId: [
                    { required: true, message: "请输入民族", trigger: "blur" },
                ],
                nativePlace: [
                    { required: true, message: "请输入籍贯", trigger: "blur" },
                ],
                politicId: [
                    {
                        required: true,
                        message: "请输入政治面貌",
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        required: true,
                        message: "请输入邮箱地址",
                        trigger: "blur",
                    },
                    { type: "email", message: "邮箱地址格式不正确" },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入电话号码",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入员工地址",
                        trigger: "blur",
                    },
                ],
                departmentId: [
                    { required: true, message: "请输入部门", trigger: "blur" },
                ],
                jobLevelId: [
                    { required: true, message: "请输入职称", trigger: "blur" },
                ],
                posId: [
                    { required: true, message: "请输入职位", trigger: "blur" },
                ],
                engageForm: [
                    {
                        required: true,
                        message: "请输入聘用形式",
                        trigger: "blur",
                    },
                ],
                tiptopDegree: [
                    { required: true, message: "请输入学历", trigger: "blur" },
                ],
                specialty: [
                    { required: true, message: "请输入专业", trigger: "blur" },
                ],
                school: [
                    {
                        required: true,
                        message: "请输入毕业院校",
                        trigger: "blur",
                    },
                ],
                beginDate: [
                    {
                        required: true,
                        message: "请输入入职日期",
                        trigger: "blur",
                    },
                ],
                workState: [
                    {
                        required: true,
                        message: "请输入工作状态",
                        trigger: "blur",
                    },
                ],
                // workId: [
                //     { required: true, message: "请输入工号", trigger: "blur" },
                // ],
                contractTerm: [
                    {
                        required: true,
                        message: "请输入合同期限",
                        trigger: "blur",
                    },
                ],
                conversionTime: [
                    {
                        required: true,
                        message: "请输入转正日期",
                        trigger: "blur",
                    },
                ],
                notWorkDate: [
                    {
                        required: true,
                        message: "请输入离职日期",
                        trigger: "blur",
                    },
                ],
                beginContract: [
                    {
                        required: true,
                        message: "请输入合同起始日期",
                        trigger: "blur",
                    },
                ],
                endContract: [
                    {
                        required: true,
                        message: "请输入合同结束日期",
                        trigger: "blur",
                    },
                ],
                workAge: [
                    { required: true, message: "请输入工龄", trigger: "blur" },
                ],
            },
            // 民族数据
            nations: [],
            // 职位数据
            positions: [],
            // 职称数据
            joblevels: [],
            // 所有部门数据
            allDept: [],
            // 树形控件默认规则
            defaultProps: {
                children: "children",
                label: "name",
            },
            tiptopDegree: [
                "博士",
                "硕士",
                "本科",
                "大专",
                "中专",
                "高中",
                "初中",
                "小学",
                "其它",
            ],
            politicsstatus: [],
            inputDeptName: "",
            visible: false,
            visible2: false,

            showAdvanceSearchVisible: false,
            // 高级搜索
            searchValue: {
                politicId: null,
                nationId: null,
                posId: null,
                jobLevelId: null,
                engageForm: "",
                departmentId: null,
                beginDateScope: null,
            },
        };
    },
    watch: {
        empName() {
            this.initEmployees();
        },
    },
    created() {
        this.initEmployees();
        this.initDate();
    },
    methods: {
        // 表格员工数据
        initEmployees() {
            this.loading = true;
            let url =
                "/employee/basic/getEmployee?currentPage=" +
                this.currentPage +
                "&size=" +
                this.size;
            // if (type && type == "advanced") {
            //     if (this.searchValue.politicId) {
            //         url += "&politicId=" + this.searchValue.politicId;
            //     }
            //     if (this.searchValue.nationId) {
            //         url += "&nationId=" + this.searchValue.nationId;
            //     }
            //     if (this.searchValue.posId) {
            //         url += "&posId=" + this.searchValue.posId;
            //     }
            //     if (this.searchValue.jobLevelId) {
            //         url += "&jobLevelId=" + this.searchValue.jobLevelId;
            //     }
            //     if (this.searchValue.engageForm) {
            //         url += "&engageForm=" + this.searchValue.engageForm;
            //     }
            //     if (this.searchValue.departmentId) {
            //         url += "&departmentId=" + this.searchValue.departmentId;
            //     }
            //     if (this.searchValue.beginDateScope) {
            //         url += "&beginDateScope=" + this.searchValue.beginDateScope;
            //     }
            // } else {
            url += "&name=" + this.empName;
            // }
            this.getRequest(url).then((res) => {
                if (res) {
                    this.employees = res.data;
                    this.total = res.total;
                    this.loading = false;
                }
            });
        },
        showEditEmpView(data) {
            this.title = "编辑员工信息";
            this.emp = data;
            this.inputDeptName = data.department.name;
            this.dialogVisible = true;
        },
        deleteEmp(row) {
            this.$confirm(
                "您确定要删除【 " + data.name + " 】这个员工吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "只是点错了",
                    type: "warning",
                }
            )
                .then(() => {
                    this.deleteRequest(
                        "/employee/basic/deleteEmployee/" + data.id
                    ).then((resp) => {
                        if (resp) {
                            this.initEmployees();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除!",
                    });
                });
        },
        currentChange(current) {
            this.currentPage = current;
            this.initEmployees();
        },
        sizeChange(size) {
            this.size = size;
            this.initEmployees();
        },
        // 初始化职位信息
        initPositions() {
            this.getRequest("/employee/basic/getAllPosition").then((res) => {
                if (res) {
                    this.positions = res;
                }
            });
        },
        // 获取最大工号
        getMaxWorkId() {
            this.getRequest("/employee/basic/maxWorkID").then((res) => {
                if (res) {
                    this.emp.workId = res.object;
                }
            });
        },
        // 显示添加弹窗
        showAddEmpView() {
            this.title = "添加员工";
            this.inputDeptName = "";
            this.emp = {
                id: null,
                name: "",
                gender: "",
                birthday: null,
                idCard: "",
                wedlock: "",
                nationId: null,
                nativePlace: "",
                politicId: null,
                email: "",
                phone: "",
                address: "",
                departmentId: null,
                jobLevelId: null,
                posId: null,
                engageForm: "",
                tiptopDegree: "",
                specialty: "",
                school: "",
                beginDate: "",
                workState: "在职",
                workId: "",
                contractTerm: null,
                conversionTime: "",
                notWorkDate: null,
                beginContract: "",
                endContract: "",
                workAge: null,
                salaryId: null,
            };
            this.dialogVisible = true;
            this.initPositions();
            this.getMaxWorkId();
        },
        // 节点被点击时触发
        handleNodeClick(data) {
            this.inputDeptName = data.name;
            this.emp.departmentId = data.id;
            this.visible2 = !this.visible2;
        },
        // 显示与隐藏
        showDeptView() {
            this.visible = !this.visible;
        },
        // 添加
        doAddEmp() {
            if (this.emp.id) {
                this.$refs["empForm"].validate((valid) => {
                    if (valid) {
                        this.putRequest(
                            "/employee/basic/updateEmployee",
                            this.emp
                        ).then((resp) => {
                            if (resp) {
                                this.dialogVisible = false;
                                this.initEmployees();
                            }
                        });
                    }
                });
            } else {
                this.$refs["empForm"].validate((valid) => {
                    if (valid) {
                        this.postRequest(
                            "/employee/basic/addEmployee",
                            this.emp
                        ).then((resp) => {
                            if (resp) {
                                this.dialogVisible = false;
                                this.initEmployees();
                            }
                        });
                    }
                });
            }
        },
        // 数据初始化
        initDate() {
            if (!window.sessionStorage.getItem("nations")) {
                // 民族
                this.getRequest("/employee/basic/getAllNation").then((res) => {
                    if (res) {
                        this.nations = res;
                        window.sessionStorage.setItem(
                            "nations",
                            JSON.stringify(res)
                        );
                    }
                });
            } else {
                this.nations = JSON.parse(
                    window.sessionStorage.getItem("nations")
                );
            }
            if (!window.sessionStorage.getItem("joblevels")) {
                // 职称
                this.getRequest("/employee/basic/getAllJobLevel").then(
                    (res) => {
                        if (res) {
                            this.joblevels = res;
                            window.sessionStorage.setItem(
                                "joblevels",
                                JSON.stringify(res)
                            );
                        }
                    }
                );
            } else {
                this.joblevels = JSON.parse(
                    window.sessionStorage.getItem("joblevels")
                );
            }
            if (!window.sessionStorage.getItem("politicsstatus")) {
                // 政治面貌
                this.getRequest("/employee/basic/getAllPoliticsStatus").then(
                    (res) => {
                        if (res) {
                            this.politicsstatus = res;
                            window.sessionStorage.setItem(
                                "politicsstatus",
                                JSON.stringify(res)
                            );
                        }
                    }
                );
            } else {
                this.politicsstatus = JSON.parse(
                    window.sessionStorage.getItem("politicsstatus")
                );
            }
            if (!window.sessionStorage.getItem("deps")) {
                // 部门
                this.getRequest("/employee/basic/getAllDepartment").then(
                    (res) => {
                        if (res) {
                            this.allDept = resp;
                            window.sessionStorage.setItem(
                                "deps",
                                JSON.stringify(res)
                            );
                        }
                    }
                );
            } else {
                this.allDept = JSON.parse(
                    window.sessionStorage.getItem("deps")
                );
            }
        },
        // searchHandleNodeClick(data) {
        //     this.inputDeptName = data.name;
        //     this.searchValue.departmentId = data.id;
        //     this.visible = !this.visible;
        // },
    },
};
</script>

<style scoped>
.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
.inputDeptNameClass {
    width: 150px;
    display: inline-flex;
    border: 1px solid #dedede;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    font-size: 13px;
    padding-left: 8px;
    box-sizing: border-box;
}
</style>